<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;

    }
    body,html{
        height: 100%;
        width: 100%;
        background-color: #004b00;
        overflow: hidden;

    }
</style>
<body>

</body>
<script>


    (function () {

        try {
            showPopup_collect()
            showPopup_return()
        } catch (e) {
        }
        function showPopup_collect() {
            let f=document.querySelector(".father_huangweimin")
            if(f!=null)
            {
                f.parentNode.removeChild(f)
            }
            let father = document.createElement("div")
            father.className="father_huangweimin"
            father.style.width = "50px"
            father.style.height = "50px"
            father.style.borderRadius = "25px"
            father.style.display = "flex"
            father.style.justifyContent = "center"
            father.style.alignItems = "center"
            father.style.border = "1px solid black"
            father.style.position = "absolute"//!用于实现拖拽移动
            father.style.zIndex = "2247483646"

            father.style.top = "20px"
            father.style.left = 20 + Math.random() * 100 + "px"
            father.style.backgroundColor="rgba(1,1,1,0.16)"
            let content = document.createElement("div")
            content.className="content_huangweimin"
            content.innerHTML = "<div style='font-size: 11px;text-align: center;color: red'>收藏页面</div>"
            content.style.width = "100%"
            content.style.height = "100%"
            content.style.borderRadius = "50%"
            content.style.display = "flex"
            content.style.justifyContent = "center"
            content.style.alignItems = "center"

            father.appendChild(content)

            document.body.appendChild(father)
            content.addEventListener("selectstart",function (e) {
               e.preventDefault()
            })
            content.addEventListener("click",function (e) {
                let url=window.location.href
                let 标题=window.prompt("请输入标题")
                if(标题!=null)
                {
                    let 备注=window.prompt("请输入备注")
                    uploadCollect.callback(url,标题,备注)//使用网络请求的方式上传数据会出现跨域错误
                }
            })
            dragAndDropForPhone(content, father)
        }
        function showPopup_return() {
            let f=document.querySelector(".father_huangweimin_return")
            if(f!=null)
            {
                f.parentNode.removeChild(f)
            }
            let father = document.createElement("div")
            father.className="father_huangweimin_return"
            father.style.width = "50px"
            father.style.height = "50px"
            father.style.borderRadius = "25px"
            father.style.display = "flex"
            father.style.justifyContent = "center"
            father.style.alignItems = "center"
            father.style.border = "1px solid black"
            father.style.position = "absolute"//!用于实现拖拽移动
            father.style.zIndex = "2247483646"

            father.style.top = "60px"
            father.style.left = 20 + Math.random() * 100 + "px"
            father.style.backgroundColor="rgba(1,1,1,0.16)"
            let content = document.createElement("div")
            content.className="content_huangweimin_return"
            content.innerHTML = "<div style='font-size: 11px;text-align: center;color: red'>回到主页</div>"
            content.style.width = "100%"
            content.style.height = "100%"
            content.style.borderRadius = "50%"
            content.style.display = "flex"
            content.style.justifyContent = "center"
            content.style.alignItems = "center"

            father.appendChild(content)

            document.body.appendChild(father)
            content.addEventListener("selectstart",function (e) {
                e.preventDefault()
            })
            content.addEventListener("click",function (e) {
               window.location.href="http://localhost:8080/index"
            })
            dragAndDropForPhone(content, father)
        }
        function dragAndDropForPhone(e, parent) {
            var startX = 0; // 获取手指初始坐标
            var startY = 0;
            var x = 0; // 获得盒子原来的位置
            var y = 0;
            // 手指触摸
            e.addEventListener('touchstart', function (e) {
                //  获取手指初始坐标
                startX = e.targetTouches[0].pageX;
                startY = e.targetTouches[0].pageY;
                //x = this.offsetLeft;
                //y = this.offsetTop;
                x = parent.offsetLeft
                y = parent.offsetTop;
                //this.style.boxShadow = '0 0 15px rgba(0, 0, 0, .6)';
                parent.style.boxShadow = '0 0 15px rgba(0, 0, 0, .6)';
            });
            // 手指离开
            e.addEventListener('touchend', function (e) {
                //this.style.boxShadow = '';
                parent.style.boxShadow = '';

            });

            // 手指按住移动
            e.addEventListener('touchmove', function (e) {
                //  计算手指的移动距离：手指移动之后的坐标减去手指初始的坐标
                var moveX = e.targetTouches[0].pageX - startX;
                var moveY = e.targetTouches[0].pageY - startY;
                // 移动盒子 盒子原来的位置 + 手指移动的距离
                parent.style.left = x + moveX + 'px';
                parent.style.top = y + moveY + 'px';
                e.preventDefault(); // 阻止屏幕滚动的默认行为
            });

        }
    })()

</script>
</html>